<template>
  <view class="container">
    <view class="row-title" @click="showDetail = !showDetail">
      <view class="title">
        {{ title }}
      </view>
      <u-icon :name="showDetail ? 'arrow-down' : 'arrow-right'"></u-icon>
    </view>
    <view class="detail" v-show="showDetail">
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '双低轮动'
    }
  },
  data() {
    return {
      showDetail: false
    };
  }
};
</script>

<style lang="scss" scoped>
.container {
  margin-top: 10rpx;
  background: #fff;
  border-bottom: 2rpx solid rgba(197, 201, 212, 0.2);
}
.row-title {
  padding: 0 32rpx;
  width: 750rpx;
  height: 110rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-weight: 700;
  }
}
.detail {
  padding: 0rpx 32rpx;
  padding-bottom: 32rpx;
  text-indent: 36rpx;
}
</style>